<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.min.js"></script>


</head>
<body>
<div id="login">
    <h3>欢迎您来到网上银行</h3>
    <div id="box1">
        <div id="logo">logo</div>

    </div>
    <from>
        <input type="text" id="phone" name="phone" placeholder="请输入手机号"><br>
        <input type="password" id="password1" name="password1" placeholder="请输入密码"><br>

        <div class="user-phone">
            <div id="box2">
                <label for="imageCode"><i class="am-icon-check am-icon-sm"></i></label>
                <!--这里v-model="phoneUserForm.imageCode" 双向绑定 用户根据图形验证码输入的验证码   style="width: 180px;"设置文本的输入长度  -->
                <input type="text" name="" style="width: 140px;" v-model="phoneUserForm.base64ImageCode"
                       id="imageCode" placeholder="请输入验证码">
            </div>
            <div>
                <canvas id="canvas" width="150px" height="50px"></canvas>
            </div>
            <div id="box3">
                <input type="button" id="submit" name="submit" value="登录">
            </div>
            <div id="box4">
                <a href="register.html">还未注册?</a>
            </div>
        </div>
    </from>
</div>


</body>

<style>
    #box1{
        width: 100%;
        height: 100px;

    }
    .user-phone{
        margin: 0 auto;
        width: 500px;
        height: 100%;
    }
    .user-phone div{

        float: left;
    }
    #box3{
        margin-left: 100px;
    }
    #box2{
        margin-top: -7px;
        margin-left: 100px;
    }
    #box4{
        margin-left: 210px;
    }
    #logo {
        margin: 0  auto;
        width: 100px;
        border-radius: 50px;
        /*text-align: center;*/
        line-height: 100px;
        background-color: aqua;
    }
    body{
        text-align: center;
        font: 1.3em sans-serif;
    }
    h3{
        font: 1.5em sans-serif;
        letter-spacing: 5px;
    }
    /*#code,#btn,#submit{*/
    /*    border-radius: 30px;*/
    /*}*/
    input,#btn{
        width: 300px;
        height: 40px;
        margin-top: 10px;
        box-shadow: 0 0 10px #fff;
    }
    /*#btn,#code{*/
    /*    width: 140px;*/
    /*    height: 40px;*/
    /*    margin-top: 30px;*/
    /*}*/
    #submit{
        width: 300px;
        height: 50px;
        font: 1.4em sans-serif;
        margin-top: 35px;
        margin-left: 5px;
        line-height: 50px;
    }


</style>

<script type="text/javascript">
    let a = drawPic()
    //获取用户数据
    $("#submit").click(function (){
        let phone = $("#phone").val();
        let password1 = $("#password1").val();
        let code = $("#imageCode").val()
        let url ="/airong/user?action=login"
        let params = {phone,password1}
        $.post(url,params,function(data){
            if(data==="\"false\""){
                alert("手机号或密码错误")
            }else if (a != code){
                alert("验证码错误")
            }else {
                let kaihu = confirm("是否前往开户")
                if (kaihu == true){
                    location.href = "/airong/kaihu2.html"
                }else {
                    location.href = "/airong/personalCenter.html"
                }
            }
        },"text");

    })

        function randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
        }

        //生成随机颜色RGB分量
        function randomColor(min, max) {
            var _r = randomNum(min, max);
            var _g = randomNum(min, max);
            var _b = randomNum(min, max);
            return "rgb(" + _r + "," + _g + "," + _b + ")";
        }

        //先阻止画布默认点击发生的行为再执行drawPic()方法
        document.getElementById("canvas").onclick = function (e) {
            e.preventDefault();
            drawPic();
        };

        function drawPic() {
            //获取到元素canvas
            var $canvas = document.getElementById("canvas");
            var _str = "0123456789";//设置随机数库
            var _picTxt = "";//随机数
            var _num = 4;//4个随机数字
            var _width = $canvas.width;
            var _height = $canvas.height;
            var ctx = $canvas.getContext("2d");//获取 context 对象
            ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
            ctx.fillStyle = randomColor(180, 240);//填充画布颜色
            ctx.fillRect(0, 0, _width, _height);//填充矩形--画画
            for (var i = 0; i < _num; i++) {
                var x = (_width - 10) / _num * i + 10;
                var y = randomNum(_height / 2, _height);
                var deg = randomNum(-45, 45);
                var txt = _str[randomNum(0, _str.length)];
                _picTxt += txt;//获取一个随机数
                ctx.fillStyle = randomColor(10, 100);//填充随机颜色
                ctx.font = randomNum(16, 40) + "px SimHei";//设置随机数大小，字体为SimHei
                ctx.translate(x, y);//将当前xy坐标作为原始坐标
                ctx.rotate(deg * Math.PI / 180);//旋转随机角度
                ctx.fillText(txt, 0, 0);//绘制填色的文本
                ctx.rotate(-deg * Math.PI / 180);
                ctx.translate(-x, -y);
            }
            for (var i = 0; i < _num; i++) {
                //定义笔触颜色
                ctx.strokeStyle = randomColor(90, 180);
                ctx.beginPath();
                //随机划线--4条路径
                ctx.moveTo(randomNum(0, _width), randomNum(0, _height));
                ctx.lineTo(randomNum(0, _width), randomNum(0, _height));
                ctx.stroke();
            }
            for (var i = 0; i < _num * 10; i++) {
                ctx.fillStyle = randomColor(0, 255);
                ctx.beginPath();
                //随机画原，填充颜色
                ctx.arc(randomNum(0, _width), randomNum(0, _height), 1, 0, 2 * Math.PI);
                ctx.fill();
            }
            return _picTxt;}
        //返回随机数




</script>

</html>